Flutter / Examples / * Project 26 : House Rent

UI House Rent

UI

OnTap event on tab

pubspec.yaml



dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  carousel_slider: ^5.0.0
  animate_do: ^3.3.4
  fl_chart: ^0.69.0
  google_fonts: ^6.2.1
  provider: ^6.1.2
  syncfusion_flutter_gauges: ^27.1.56
  flutter_staggered_grid_view: ^0.7.0
  flutter_svg: ^2.0.10+1

main.dart


                          import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import 'screens/home/home_screen.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        textTheme: GoogleFonts.poppinsTextTheme(),
      ),
      home: const HomeScreen(),
    );
  }
}

constants.dart


import 'package:flutter/material.dart';


Color primaryColor = const Color(0xFF811B83);

Color titleTextColor = const Color(0xFF100E34);

Color bodyTextColor = const Color(0xFF100E34).withOpacity(0.5);

Color backgroundColor = const Color(0xFFF5F6F6);

Color secondaryColor = const Color(0xFFFA5019);

widget/bottom_nav_bar.dart


import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class BottomNavBar extends StatelessWidget {
  const BottomNavBar({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 15),
      margin: const EdgeInsets.only(bottom: 25),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(35),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.3),
            spreadRadius: 1,
            blurRadius: 7,
            offset: Offset(0, 3),
          )
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Icon(
            Icons.home,
            size: 30,
          ),
          const Icon(
            Icons.search,
            size: 30,
            color: Colors.black45,
          ),
          SvgPicture.asset("assets/icons/notification.svg"),
          SvgPicture.asset("assets/icons/chat.svg"),
          SvgPicture.asset("assets/icons/home_mark.svg"),
        ],
      ),
    );
  }
}

widget/search_bar.dart


import 'package:flutter/material.dart';

class MySearchBar extends StatelessWidget {
  const MySearchBar({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
      child: TextField(
        decoration: InputDecoration(
          fillColor: Colors.white,
          filled: true,
          border: OutlineInputBorder(
            borderSide: BorderSide.none,
            borderRadius: BorderRadius.circular(10),
          ),
          hintText: "Search here....",
          prefixIcon: const Icon(
            Icons.search,
            size: 30,
            color: Colors.black45,
          ),
        ),
      ),
    );
  }
}

screens/home/home_screen.dart



import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:b/constants.dart';
import 'package:b/screens/home/best_offer.dart';
import 'package:b/screens/home/category.dart';
import 'package:b/screens/home/toprecommend.dart';
import 'package:b/widget/bottom_nav_bar.dart';
import 'package:b/widget/search_bar.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      // for bottom navigation bar
      bottomNavigationBar: const BottomNavBar(),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // for profile and menu
            profileAndMenu(),
            //introduction text
            IntroductioText(),
            // for search bar
            const MySearchBar(),
            // for catoegory
            const Category(),
            const SizedBox(height: 20,),
            // for image and more
            const TopRecommended(),
            // best offer
            const BestOffer(),
          ],
        ),
      ),
    );
  }

  Container IntroductioText() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            "Hello Raihan!",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.black45,
              fontSize: 16,
            ),
          ),
          Text(
            "Find your sweet Home",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: titleTextColor,
              fontSize: 20,
            ),
          )
        ],
      ),
    );
  }

  Padding profileAndMenu() {
    return Padding(
      padding: const EdgeInsets.only(right: 15, left: 15),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SvgPicture.asset("assets/icons/menu.svg"),
          const CircleAvatar(
            backgroundImage: AssetImage("assets/images/profile.png"),
          )
        ],
      ),
    );
  }
}

screens/home/best_offer.dart


import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:b/constants.dart';

class BestOffer extends StatelessWidget {
  const BestOffer({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      child: Column(
        children: [
          const SizedBox(
            height: 10,
          ),
          Row(
            children: [
              Text(
                "Best Offer",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18,
                  color: titleTextColor,
                ),
              ),
              const Spacer(),
              const Text(
                "See All",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                  color: Colors.black45,
                ),
              ),
            ],
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
            child: Stack(
              children: [
                Row(
                  children: [
                    Container(
                      height: 70,
                      width: 150,
                      decoration: BoxDecoration(
                          image: const DecorationImage(
                            image: AssetImage("assets/images/best_house.jpeg"),
                            fit: BoxFit.cover,
                          ),
                          borderRadius: BorderRadius.circular(8)),
                    ),
                    const SizedBox(
                      width: 1,
                    ),
                    const Column(
                      children: [
                        Text(
                          "The Moon House",
                          style: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 16),
                        ),
                        SizedBox(
                          height: 1,
                        ),
                        Text(
                          "P455, Chhatak, Sylhet",
                          style: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 12),
                        ),
                      ],
                    )
                  ],
                ),
                Positioned(
                  right: 0,
                  child: Container(
                    padding: const EdgeInsets.all(5),
                    height: 1,
                    width: 25,
                    decoration: const BoxDecoration(
                        shape: BoxShape.circle, color: Colors.black26),
                    child: SvgPicture.asset("assets/icons/heart.svg",),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

screens/home/category.dart


import 'package:flutter/material.dart';
import 'package:b/constants.dart';
import 'package:b/model/house.dart';

class Category extends StatefulWidget {
  const Category({super.key});

  @override
  State<Category> createState() => _CategoryState();
}

class _CategoryState extends State<Category> {
  int selectedItems = 0;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 35,
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: categoryList.length,
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {
                setState(() {
                  selectedItems = index;
                });
              },
              child: Container(
                margin: const EdgeInsets.only(left: 20, right: 10),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                        width: 3,
                        color: selectedItems == index
                            ? primaryColor
                            : Colors.transparent),
                  ),
                ),
                child: Text(
                  categoryList[index],
                  style: TextStyle(
                      color:
                      selectedItems == index ? primaryColor : bodyTextColor,
                      fontWeight: selectedItems == index
                          ? FontWeight.bold
                          : FontWeight.normal,
                      fontSize: selectedItems == index ? 16 : 14),
                ),
              ),
            );
          }),
    );
  }
}

screens/home/toprecommend.dart


import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/svg.dart';
import 'package:b/constants.dart';
import 'package:b/model/house.dart';
import 'package:b/screens/detail/detail_screen.dart';

class TopRecommended extends StatelessWidget {
  const TopRecommended({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 345,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: recommendedList.length,
        itemBuilder: (context, index) {
          final rent = recommendedList[index];
          return GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailScreen(rent: rent),
                ),
              );
            },
            child: Container(
              height: 300,
              width: 250,
              margin: const EdgeInsets.only(
                left: 20,
              ),
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Stack(
                children: [
                  // for image
                  Hero(
                    tag: rent.imageUrl,
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        image: DecorationImage(
                            image: AssetImage(
                              rent.imageUrl,
                            ),
                            fit: BoxFit.cover),
                      ),

                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: Container(
                      padding: const EdgeInsets.all(10),
                      color: Colors.white30,
                      child: Row(
                        children: [
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  rent.name,
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 16,
                                    color: titleTextColor,
                                  ),
                                ),
                                const SizedBox(
                                  height: 10,
                                ),
                                Text(
                                  rent.address,
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 12,
                                    color: titleTextColor,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          circularBox("assets/icons/heart.svg")
                        ],
                      ),
                    ),
                  ),
                  Positioned(
                      right: 15,
                      top: 15,
                      child: circularBox("assets/icons/mark.svg"))
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Container circularBox(image) {
    return Container(
      height: 25,
      width: 25,
      padding: const EdgeInsets.all(5),
      decoration: BoxDecoration(color: secondaryColor, shape: BoxShape.circle),
      child: SvgPicture.asset(image),
    );
  }
}

screens/detail/detail_screen.dart


import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/svg.dart';
import 'package:b/constants.dart';
import 'package:b/model/house.dart';
import 'package:b/screens/detail/house_detail.dart';

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key, required this.rent});
  final House rent;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            detailImage(context),
            const SizedBox(
              height: 20,
            ),
            // for house name, address, location and price
            houseInfo(),
            const SizedBox(
              height: 20,
            ),
            // more house detail
            const HouseDetail(),
            const SizedBox(
              height: 25,
            ),
            // for about
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "About",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 18,
                        color: titleTextColor),
                  ),
                  const SizedBox(
                    height: 8,
                  ),
                  Text(
                    rent.description,
                    style: TextStyle(fontSize: 16, color: bodyTextColor),
                  ),
                ],
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            Container(
              margin: const EdgeInsets.only(left: 20, right: 20),
              padding: const EdgeInsets.symmetric(
                horizontal: 20,
              ),
              decoration: BoxDecoration(
                  color: primaryColor, borderRadius: BorderRadius.circular(10)),
              height: 45,
              alignment: Alignment.center,
              child: const Text(
                "Book Now",
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                    color: Colors.white),
              ),
            )
          ],
        ),
      ),
    );
  }

  Container houseInfo() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            rent.name,
            style: TextStyle(
                color: titleTextColor,
                fontSize: 18,
                fontWeight: FontWeight.bold),
          ),
          const SizedBox(
            height: 7,
          ),
          Text(
            rent.address,
            style: TextStyle(
              color: titleTextColor,
              fontSize: 15,
            ),
          ),
          const SizedBox(
            height: 15,
          ),
          Text(
            "5000 sqf",
            style: TextStyle(
              color: titleTextColor,
              fontSize: 15,
            ),
          ),
          const SizedBox(
            height: 6,
          ),
          Text.rich(TextSpan(children: [
            TextSpan(
              text: rent.price,
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
            const TextSpan(text: ' Fer month')
          ]))
        ],
      ),
    );
  }

  SizedBox detailImage(BuildContext context) {
    return SizedBox(
      height: 500,
      child: Stack(
        children: [
          Hero(
            tag: rent.imageUrl,
            child: Image.asset(
              rent.imageUrl,
              fit: BoxFit.cover,
              height: double.infinity,
            ),
          ),
          SafeArea(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    // for back button
                    GestureDetector(
                      onTap: () {
                        Navigator.pop(context);
                      },
                      child: const Icon(
                        Icons.arrow_circle_left_sharp,
                        color: Colors.white70,
                      ),
                    ),
                    // for bookmark button
                    Container(
                      height: 25,
                      width: 25,
                      padding: const EdgeInsets.all(5),
                      decoration: BoxDecoration(
                          color: secondaryColor, shape: BoxShape.circle),
                      child: SvgPicture.asset("assets/icons/mark.svg"),
                    )
                  ],
                ),
              ))
        ],
      ),
    );
  }
}

screens/detail/house_detail.dart


import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:b/constants.dart';

class HouseDetail extends StatelessWidget {
  const HouseDetail({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        children: [
          Row(
            children: [
              itemDetail("assets/icons/bedroom.svg", "5 Bathroom \n3 Master Bedroom"),

              itemDetail("assets/icons/bathroom.svg", "5 Bathroom \n3 Toilet"),
            ],
          ),
          const SizedBox(height: 10,),
          Row(
            children: [
              itemDetail(
                  "assets/icons/ketchen.svg", "2 Ketchen \n120 sqft"),
              itemDetail("assets/icons/parking.svg", "2 Parking \n180 sqft"),
            ],
          ),
        ],
      ),
    );
  }

  Expanded itemDetail(image, text) => Expanded(
      child: Row(
        children: [
          SvgPicture.asset(image,height: 30,),
          const SizedBox(
            width: 15,
          ),
          Text(
            text,
            style: TextStyle(fontSize: 14, color: bodyTextColor),
          )
        ],
      ));
}

model/house.dart


class House {
  String name;
  String address;

  String imageUrl;
  String price;
  String description;

  House(
      this.name,
      this.address,
      this.imageUrl,
      this.price,
      this.description,
      );
}

// for cayegory
final categoryList = [
  'Top Recommended',
  'Near you',
  'Agency Recommended',
];

final recommendedList = [
  House(
      'The Moon House',
      'P455, Chhatak, Sylhet',
      'assets/images/house01.jpeg',
      '\$4455',
      'Enim veniam dolor sint ipsum culpa magna dolore incialaunt laborum excepteu...'
  ),
  House(
      'The Dream House',
      'P133, Washington, D.C ',
      'assets/images/house02.jpeg',
      '\$5500',
      'Washington, D.C,formally the District of Columbia and commonly called Washington.'
  ),
  House(
    'Favorite House',
    'P33, Japan',
    'assets/images/house03.png',
    '\$1010',
    "A hotel is an establishment that provides paid lodging on a short-term basis. Facilities provided inside a hotel room may range from a modest-quality ...",
  )
];